<template>
    <ul class="drop-list" :class="{'drop-position': type === 2}">
        <li class="drop-item"
            v-for="(d,index) in data"
            :key="index"
            @click="onChanged(d,index)"
        >
            <div class="left">
                <img :src="d.checked?d.icon2:d.icon1" alt="" style="margin-right: 8px;">
                <span :class="{'checked_color': d.checked}">{{d.title}}</span>
            </div>
            <img src="../../assets/image/checked.png" alt="" v-show="d.checked" class="checked_icon">
        </li>
    </ul>
</template>

<script>
    export default {
        props: {
            type: Number,
            data: Array,
        },
        data() {
            return {

            }
        },
        mounted() {
            this.data.forEach(d => {
                if(d.title === this.$parent.sortTitle) {
                    d.checked = true
                } else {
                    d.checked = false;
                }
                if(d.title === this.$parent.shareTitle) {
                    d.checked = true
                }
            })
        },
        methods: {
            onChanged(d,index) {
                this.data.forEach(d => {
                    d.checked = false;
                });
                d.checked = true;
                if(this.type === 2) {
                    this.$parent.shareTitle = d.title;
                    this.$parent.isShowMenu = false;
                    index === 0 ? this.$parent.getShareToMy() : index === 1 ? this.$parent.getMyShare() : ''
                } else {
                    this.$parent.sortTitle = d.title;
                    this.$parent.getFileList(d.sort);
                    this.$parent.isShowDrop = false;
                }
            },
        }
    }
</script>

<style scoped>
    .drop-list {
        padding: 15px;
        background: #F9F9F9;
        border-radius: 0 0 40px 40px;
        position: absolute;
        top: 205px;
        left: 50%;
        width: 700px;
        transform: translate(-50%);
    }
    .drop-position {
        top: 125px;
    }
    .drop-item {
        height: 100px;
        background: #fff;
        display: flex;
        align-items: center;
        padding: 0 30px;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .drop-item .left {
        display: flex;
        align-items: center;
    }

    .drop-item .left img {
        width: 36px;
        height: 36px;
    }

    .drop-item .left span {
        color: #191919;
        font-size: 26px;
    }
    .checked_color {
        color: #3EC5F0 !important;
    }
    .checked_icon {
        width: 29px;
        height: 19px;
    }
</style>